<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">

    <style>
        .table-row-bar{
            padding: 0px 5px;
            cursor: pointer;
        }

        .date-icon{
            position: absolute;
            top: 7px;
            right: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="container" class="layuimini-container">
    <div class="layuimini-main">
        <h2><b>理财产品查询列表</b></h2>

        <div style="margin: 10px 0px 10px 0px">
            <form class="layui-form" action="" id="myform" lay-filter="myform">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" style="padding: 9px 15px 9px 0px;">开始时间：</label>
                        <div class="layui-input-inline" style="width: 180px;">

                            <input type="text" name="beginTime" v-model="beginTime" class="layui-input" id="beginTime">

                            <i class="layui-icon layui-icon-date date-icon"></i>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" style="padding: 9px 15px 9px 0px;">结束时间：</label>
                        <div class="layui-input-inline" style="width: 180px;">
                            <input type="text" name="endTime" v-model="endTime" class="layui-input" id="endTime">
                            <i class="layui-icon layui-icon-date date-icon"></i>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" style="padding: 9px 15px 9px 0px;width: 90px;">理财产品：</label>
                        <div class="layui-input-inline" style="width: 140px;">

<!--                            <select v-model="reqType" name="reqType" lay-filter="reqType">-->
<!--                                <option value=""></option>-->
<!--                                <option value="1000">XXA产品</option>-->
<!--                                <option value="2000">XXB产品</option>-->
<!--                            </select>-->
                            <input type="text" name="finaProdName" v-model="finaProdName" class="layui-input" id="finaProdName">

                        </div>
                    </div>

                    <div class="layui-inline" style="float: right;margin-right:0px;">
                        <a class="layui-btn layui-btn-normal" lay-submit="" style="width: 100px;" lay-filter="data-search-btn" @click="search">查询</a>
                        <a class="layui-btn layui-btn-normal" lay-submit="" style="width: 100px;" lay-filter="data-reset-btn" @click="reset">重置</a>
                    </div>
                </div>
            </form>
        </div>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
</div>

<!-- Vue 表达式与Layui模板表达式冲突，需放在Vue Scope 外边 -->
<script type="text/html" id="operTpl">
    <a class="table-row-bar" lay-event="dealApply" style="color: #1890FF;">处理</a>
</script>


<script type="text/html" id="yieldRateTpl">
    <a lay-event="detail">{{Math.round((d.yieldRate*100)*1000)/1000 + '%'}}</a>
</script>

<script type="text/html" id="statusTpl">
    {{# if(d.orderStatus == '1000'){ }}
    <span class="layui-badge layui-bg-green"> 计息中 </span>
    {{# } else if (d.orderStatus == '2000'){  }}
    <span class="layui-badge layui-bg-orange"> 待计息 </span>
    {{#  }  else if (d.orderStatus == '3000'){ }}
    <span class="layui-badge layui-bg-gray">正常结束</span>
    {{#  }  else if (d.orderStatus == '4000'){ }}
    <span class="layui-badge layui-bg-red">提前赎回</span>
    {{#  }  else if (d.orderStatus == '5000'){ }}
    <span class="layui-badge layui-bg-cyan"> 已完成 </span>
    {{#  }  else {                             }}
    <span class="layui-badge layui-bg-black">转出成功</span>
    {{#  }    }}
</script>

<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>

<script>
    layui.use(['form', 'table','laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate;

        var vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                name:'张三',
                reqType:'',
                finaProdName:'',
                beginTime:'',
                endTime:''
            },
            mounted:function(){
                this.init();
                this.getFinaProdInfoDtoWpPage();
            },
            methods: {
                init:function(){
                    laydate.render({
                        elem: '#beginTime',
                        type: 'datetime'
                    });
                    laydate.render({
                        elem: '#endTime',
                        type: 'datetime'
                    });

                    form.render();
                },
                getFinaProdInfoDtoWpPage:function(){
                    var that = this;
                    table.render({
                        elem: '#currentTableId',
                        url: wp.url('/wp/ewallet/wmps/finaProd/getFinaProdInfoDtoWpPage'),
                        headers:wp.getAjaxHeaders(),
                        parseData: wp.parseGridData,
                        cols: [[
                            {field: 'finaProdName', title: '产品名称'},
                            {field: 'walletAddress', title: '购买地址',width:250},
                            {field: 'purchAmount', title: '购买金额'},
                            {field: 'finaProdCycle', title: '周期', width:100},
                            {field: 'yieldRate', title: '收益率', templet: '#yieldRateTpl', width:100},
                            {field: 'purchTime', title: '购买日期' ,sort:true, width:200},
                            {field: 'expTime', title: '到期日'},
                            {field: 'actualYield', title: '返息额'},
                            {field:'orderStatus',  title: '状态', templet: '#statusTpl',align: "center"}
                        ]],
                        limits: wp.config.pageList,
                        limit: wp.config.pageSize,
                        page: true
                    });
                },
                search:function(){
                    // 查询参数
                    var queryParam = form.val("myform");
                    // 执行搜索重载
                    table.reload('currentTableId',{
                        page: {curr: 1},
                        elem: '#currentTableId',
                        where:queryParam,
                    });
                },
                reset:function(){
                    var that =this
                    that.getFinaProdInfoDtoWpPage()
                    $("#myform").get(0).reset();
                }
            }
        });
    });
</script>
<script>

</script>

</body>
</html>